{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<form class="custom" id="roles_form" action="">
  <div class="row">
    {{#if servicePanel}}
    <div id="role_actions">
      <div class="action_blocks columns medium-8">
      </div>
      <div class="columns medium-4 right">
        <div class="row">
          <div class="small-6 medium-6 columns">
            <label for="batch_action_period">{{tr "Period"}}
              <span class="tip">{{tr "Seconds between each group of actions"}}</span>
            </label>
            <input type="number" min="0" id="batch_action_period" name="batch_action_period"/>
          </div>
          <div class="small-6 medium-6 columns">
            <label for="batch_action_number">{{tr "Number"}}
              <span class="tip">{{tr "Number of VMs to apply the action to each period"}}</span>
            </label>
            <input type="number" min="1" id="batch_action_number" name="batch_action_number"/>
          </div>
        </div>
      </div>
    </div>
    {{/if}}
    <div id="roles_info" class="columns large-12">
      <table id="datatable_roles_{{panelId}}" class="dataTable hover">
        <thead>
          <tr>
            <th class="check" hidden>
              <input type="checkbox" class="check_all" value=""></input>
            </th>
            <th>{{tr "Name"}}</th>
            {{#if servicePanel}}
            <th>{{tr "State"}}</th>
            {{/if}}
            <th>{{tr "Cardinality"}}</th>
            <th>{{tr "VM Template"}}</th>
            <th>{{tr "Parents"}}</th>
          </tr>
        </thead>
        <tbody>
          {{#each roleList}}
          <tr>
            <td hidden>
              <input class="check_item" type="checkbox" id="role_{{name}}" name="selected_items" value="{{../element.ID}}/role/{{name}}"/>
            </td>
            <td>{{name}}</td>
            {{#if ../servicePanel}}
            <td>{{state}}</td>
            {{/if}}
            <td>{{cardinality}}</td>
            <td>{{navigate vm_template "templates-tab" vm_template}}</td>
            <td>{{parents}}</td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </div>
    <div id="roles_extended_info" class="columns twelve">
      <div class="text-center">
        <span class="fa-stack fa-5x" style="color: #dfdfdf">
          <i class="fa fa-cloud fa-stack-2x"></i>
          <i class="fa fa-info-circle fa-stack-1x fa-inverse"></i>
        </span>
        <br>
        <br>
        <span style="font-size: 18px; color: #999">
          {{tr "Select a role in the table for more information"}}
        </span>
      </div>
    </div>
  </div>
</form>
